<template>
<div style="padding:5px">
    <el-button type="primary" style="margin:5px 5px 5px 0px"  size="small" @click="openSelectButton">选择按钮</el-button>
    <el-button type="primary" style="margin:5px"  size="small" @click="openAddButton">添加按钮</el-button>
    <el-table
      :data="tableData"
      border
      size="small"
      >
      <el-table-column
        prop="name"
        label="名称">
      </el-table-column>
      <el-table-column
        prop="code"
        label="编码"
        show-overflow-tooltip>
      </el-table-column>
      <el-table-column
        prop="sort"
        label="排序"
         width="80">
      </el-table-column>
      <el-table-column
        prop="isHide"
        label="是否隐藏"
         width="80">
          <template #default="scope">
          {{scope.row.isHide === '0' ? '否':'是'}}
        </template>
      </el-table-column>
       <!-- <el-table-column
        prop="next"
        label="下一节点审核人">
          <template #default="scope">
          {{scope.row.isHide === '0' ? '不能手动设置':'可以手动设置'}}
        </template>
      </el-table-column> -->
       <el-table-column
        fixed="right"
        header-align="center"
        align="center"
        width="100"
        label="操作">
        <template #default="scope">
          <el-button type="primary" text  size="small"   @click="edit(scope.row)"> 修改 </el-button>
          <el-button  type="danger" text  size="small"   @click="del(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <buttons-select @selectButton="selectButton" ref="buttonSelect"/>
    <buttons-add @inputButton="inputButton" ref="buttonAdd"/>
</div>
</template>

  <script>
    import pick from 'lodash.pick'
    import ButtonsSelect from './ButtonsSelect.vue'
    import ButtonsAdd from './ButtonsAdd.vue'
import elementHelper from 'jp-bpmn-js-properties-panel/lib/helper/ElementHelper'
import find from 'lodash/find'
import { is } from 'jeeplus-bpmn/lib/util/ModelUtil'
import { getBusinessObject } from 'jeeplus-bpmn/lib/util/ModelUtil'
export default {
      props: {
        element: {
          type: Object,
          default: undefined
        },
        bpmnModeler: {
          type: Object,
          default: undefined
        }
      },
      components: {
        ButtonsAdd,
        ButtonsSelect
      },
      data () {
        return {
          outerVisible: false,
          oldRow: null,
          form: {
            name: '',
            code: '',
            isHide: '0',
            next: '0',
            sort: 0
          },
          tableData: []
        }
      },
      methods: {
        edit (row) {
          this.oldRow = row
          this.$refs.buttonAdd.edit(JSON.parse(JSON.stringify(row)))
        },
        openSelectButton () {
          this.$refs.buttonSelect.init(JSON.parse(JSON.stringify(this.tableData)))
        },
        openAddButton () {
          this.oldRow = null
          this.$refs.buttonAdd.add()
        },
        selectButton (dataListSelections) {
          dataListSelections.forEach((button)=>{
            button.isHide = '0'
            button.next = '0'
          })
          this.tableData = dataListSelections
          this.sort()
        },
        inputButton (form) {
            if (this.oldRow === null) {
              this.tableData.push(JSON.parse(JSON.stringify(form)))
            } else {
              this.tableData.forEach((item, index) => {
                if (item === this.oldRow) {
                  this.tableData.splice(index, 1, form)
                }
              })
            }
            this.sort()
        },
        sortTableData () {
            return this.sortByKey(this.tableData,'sort')
        },
        sort () {
          let tableData = this.sortTableData ();
          this.tableData = JSON.parse(JSON.stringify(tableData))
        },
            //数组对象排序
        sortByKey (array,key) {
            return array.sort(function(a,b){
                var x = parseInt(a[key]);
                var y = parseInt(b[key]);
                return((x<y)?-1:((x>y)?1:0));
            })
        },
        del (row) {
          this.tableData.forEach((item, index) => {
            if (item === row) {
              this.tableData.splice(index, 1)
            }
          })
        },
        getExtensionElements (element) {
          let bo = getBusinessObject(element)
          return bo.extensionElements
        },
        createExtensionElements: function (element, bo) {
          var extensionElements = elementHelper.createElement('bpmn:ExtensionElements', { values: [] }, bo, this.bpmnModeler.get('bpmnFactory'))
          bo.extensionElements = extensionElements
          return extensionElements
        },
        isExtensionElements (element) {
          return is(element, 'bpmn:ExtensionElements')
        },
        getButtonsElement (element) {
          if (!this.isExtensionElements(element)) {
            return element.buttons
          } else {
            return this.getButtonsElementInsideExtensionElements(element)
          }
        },
        getButtonsElementInsideExtensionElements (extensionElements) {
          return find(extensionElements.values, function (elem) {
            return is(elem, 'flowable:Button')
          })
        },
        updateElements (tableDatas) {
          let element = this.element
          let bo = getBusinessObject(element)
          let parent = this.getExtensionElements(element)

          if (!parent && typeof this.createExtensionElements === 'function') {
            parent = this.createExtensionElements(element, bo)
          }
          let objList = []
          tableDatas.forEach((row) => {
            var button = elementHelper.createElement('flowable:Button', row, parent, this.bpmnModeler.get('bpmnFactory'))
            objList.push(button)
          })

          let old = []
          if (this.element.businessObject.extensionElements) {
            this.element.businessObject.extensionElements.values.forEach((value) => {
              if (is(value, 'flowable:Button')) {
                old.push(value)
              }
            })
          }
          this.bpmnModeler.get('commandStack').execute('properties-panel.update-businessobject-list', {
            element: element,
            currentObject: parent,
            propertyName: 'values',
            objectsToRemove: old
          })

          this.bpmnModeler.get('commandStack').execute('properties-panel.update-businessobject-list', {
            element: element,
            currentObject: parent,
            propertyName: 'values',
            objectsToAdd: objList
          })
        }
      },
      watch: {
        tableData: {
          handler (newVal) {
            if (this.element) {
              this.updateElements(newVal)
            }
          },
          deep: true
        },
        'element': {
          handler (newVal) {
            this.tableData = []
            if (this.element.businessObject.extensionElements) {
              this.element.businessObject.extensionElements.values.forEach((value) => {
                if (is(value, 'flowable:Button')) {
                  value = pick(value, 'id', 'name', 'sort', 'isHide', 'code', 'next')
                  this.tableData.push(JSON.parse(JSON.stringify(value)))
                  this.sortTableData()
                }
              })
            }
          },
          immediate: true,
          deep: false
        }
      }
}
  </script>